<template>
    <div id="Attence">
        <!-- 不要了666 -->
        <div class="jx-content part1">
             <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
               <el-form-item label="班级信息 :" >
                    <el-cascader
                    class="cascader"
                    :options="data"
                    expand-trigger="hover"
                    :props="cascaderconfig"
                    clearable
                    change-on-select
                    v-model="selectedOptions"
                    ></el-cascader>
                 </el-form-item>
                 <el-form-item label="学生信息 :" prop="info">
                    <el-input type="text" v-model="form.info" style="width: 50%;" placeholder="请输入学生信息" auto-complete="off"></el-input>
                 </el-form-item>
                 <el-form-item >
                    <div class="button-style" @click.prevent="search">搜 索</div>
                </el-form-item>
                <el-form-item class="fr">
                    <a class="button-style" @click="downLoads">下 载</a> 
                </el-form-item>
             </el-form>
            <div class="tips"> 注：此列表按照默认班级检索</div>
            <div class="table" >
                <el-table  :data="tableData"  id="tableT" > 
                    <el-table-column  type="index" label="序号" width="100">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column  prop="username"  label="姓名" ref="tabled">  </el-table-column>
                    <el-table-column  prop="userNumber"  label="学号" >  </el-table-column>
                    <el-table-column  prop="className"  label="班级" >  </el-table-column>
                    <el-table-column  prop="grade"  label="年级" >  </el-table-column>
                    <el-table-column     prop="absentCount" label="旷课总次数" >
                        <template slot-scope="scope" >
                            <el-input-number v-model="scope.row.absentCount"  ref="searchInput"  @input="handel()"  @change="handleChange(scope.row.absentCount,scope.row.userId,scope.row.classId,scope.row.userNumber)" :min="0" :max="999" label="旷课次数" style="padding-left:20px;" class="texta"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
                </el-pagination>
            </div>
         </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
              
                cascaderconfig: {
                    value: "name",
                    label: "name",
                },
                //是否是高亮
                flags:false,
                //课程id
                courseId:'',
                data:[],
                selectedOptions: [],
                //获取班级所有id集合
                 idlist:[],
                  //排序
                  sort:'',
                 //表格列表
                 tableData: [],
                  //班级集合
                  classIdList:[],
                  currentPage: 1,
                  pagesize: 10,
                  totalCount: 1000,
                  form:{
                    //信息
                    info:'',
                    //年份
                    chooseYear:'',
                    optionsYear:[],
                    //班级
                    chooseClass:'',
                    optionsclass:[],
                   //状态
                    choosestatus:'',
                    optionstatus: []
                }
            }
        },
        created() {   
           this.courseId = this.$localstorage.getLocalStorage('setCourseId')
           this.ClassList()
         

        },
        methods: {
            //三级联动
            ClassList(){
                let self = this
                let timer = null
                self.$http.get('/tes/course/'+self.courseId+'/search/list-class?allFlag=true&defaultClassFlag=true').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.data = res.data
                        self.filterInitData(res.data)
                        self.ChangeList()
                      
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //过滤数据获得默认值
            filterInitData(data){
                let self = this;
                data.forEach(function(item) {
                if (item.defaultedClass == true) {
                    self.selectedOptions.push(item.name)
                }
                if (item.children) {
                    item.children.forEach(function(it) {
                    if (it.defaultedClass == true) {
                        self.selectedOptions.push(it.name)
                    }
                    if (it.children) {
                        it.children.forEach(function(itChild) {
                            if (itChild.defaultedClass == true) {
                                self.selectedOptions.push(itChild.name)
                            }
                        })
                    }
                    })
                }
                });
               // console.log(self.selectedOptions, 99)
                return self.selectedOptions
            },
            //获取id集合
              ChangeList(){
                let self = this
                if(self.selectedOptions[0]===undefined ||  self.selectedOptions[0]=='全部'){
                    self.selectedOptions[0]=''
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[2]===undefined || self.selectedOptions[2]=='全部'){
                    self.selectedOptions[2]=''
                }
                self.$http.post('/tes/course/'+self.courseId+'/search/class',{
                    status :self.selectedOptions[0],
                    grade :self.selectedOptions[1],
                    name: self.selectedOptions[2]
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      self.idlist=res.data
                 
                      //成功后在调取分页方法
                      self.getInit()
                    }else if(res.code == '404'){
                        self.$message(res.message)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
              },
            //获取id
             getIds(){
                let self = this
                if(self.selectedOptions[0]===undefined ||  self.selectedOptions[0]=='全部'){
                    self.selectedOptions[0]=''
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                    self.selectedOptions[2]=''
                }else if(self.selectedOptions[2]===undefined || self.selectedOptions[2]=='全部'){
                    self.selectedOptions[2]=''
                }
                self.$http.post('/tes/course/'+self.courseId+'/search/class',{
                    status :self.selectedOptions[0],
                    grade :self.selectedOptions[1],
                    name: self.selectedOptions[2]
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      self.idlist=res.data
                    }else if(res.code == '404'){
                        self.$message(res.message)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
              },
            //初始化获取默认数值列表
            getInit(){
                let self = this
                let flag=''
                if(self.selectedOptions[0]=='未结课'){
                     flag = false
                }else if(self.selectedOptions[0]=='已结课'){
                     flag = true
                }
                self.$http.post('/tes/attendance/statistics?pageNum='+self.currentPage+'&pageSize='+self.pagesize,{
                    userInfo :self.form.info,
                    classIdList : self.idlist,
                    status:flag,
                    sort : 'desc',
                    courseId: self.courseId
                }) .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                    self.tableData =  res.data.content
                    self.totalCount = res.data.total
                     $('#tableT').find(".is-scrolling-none > table > tbody > tr").map(function(i){  
                        $(this).css('background','#fff')
                    })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            
            },
            //排序功能被删除
            // sortChange(column, prop, order){
            //     let self = this
            //     self.getIds()
            //     if(column.order=='ascending'){ //升序
            //        self.sort='asc'
            //     }else if(column.order=='descending'){
            //        self.sort='desc'
            //     }
            //      self.$http.post('/tes/attendance/statistics?pageNum='+self.currentPage+'&pageSize='+self.pagesize,{
            //         userInfo :self.form.info,
            //         classIdList : self.idlist ,
            //         sort: self.sort
            //     }) .then((response) => {
            //         let res = response.data
            //         if(res.code == '200') {
            //           self.tableData =  res.data.content
            //           self.totalCount = res.data.total
            //         }else{
            //             self.$message.error(res.message)
            //         }
            //     }).catch(err => {
            //           console.log(err)
            //     })
            // },
           //计数
             handleChange(absentCount,userId,classId,userNumber) {
                document.getElementById("tableT").addEventListener("click", (e)=>{
                    let cell= e.target
                    if(cell.className=='el-icon-plus'){
                        //点击+
                        $(cell).parent().parent().parent().parent().parent().css('background','#fafafa')
                    }else if(cell.className=='el-icon-minus'){
                        //点击-
                        $(cell).parent().parent().parent().parent().parent().css('background','#fafafa')
                    }
                })
                let self = this
                self.$http.post('/tes/attendance',{  
                    courseId: self.courseId,
                    classId:classId,
                    userId:userId,
                    absentCount: absentCount
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //控制显示数最多是999
            handel(value){
                if(value>999){
                    value = 999
                }
            },
            //搜索
            search(){
                this.currentPage = 1
                this.ChangeList()
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.ChangeList()
               
            },
            //下载
            downLoads(){
                let self = this
                let flag=''
                if(self.selectedOptions[0] == '未结课'){
                     flag = false
                }else if(self.selectedOptions[0] == '已结课'){
                     flag = true
                }
                self.ChangeList()
                 self.$http.post('/tes/attendance/statistics/download',{
                    userInfo :self.form.info,
                    classIdList : self.idlist,
                    status:flag,
                    courseId:this.courseId
                },{responseType: 'blob'}) .then((response) => {
                    let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                    //console.log(response);
                    let fileName = self.selectedOptions[2]+'考勤统计.xls'
                    let url = window.URL.createObjectURL(blob);
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                }).catch(err => {
                      console.log(err)
                })
            },

        }
    }
</script>
<style scoped>
    .table>>>tr:hover>td {
         background-color: #fafafa;
         cursor: pointer;
     }
    .el-select>>>.el-input__icon{
        line-height: 32px;
    }
    
    .el-input-number>>>.el-input__inner{
        height: 40px;
        background: transparent
    }
    .el-table__row  .el-input-number>>>.el-input__inner{
        border: none;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease, .el-table__row  .el-input-number>>>.el-input-number__increase{
        height: 17px;
        width: 17px;
        border-radius: 50%;
        border: 1px solid #385899;
        top: 10px;
        color: #385899;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease{
       left: 46px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__increase{
       right: 29px;
    }
    .el-table__row   .el-input-number>>>[class*=" el-icon-"],.el-table__row  .el-input-number>>> [class^=el-icon-]{
        position: absolute;
        left: 0px;
        top: 0px;
        font-weight: bold;
        width: 100%;
        height: 100%;
        padding-top:2px;
    }
    /* .el-input-number>>>.el-input__inner{
        height: 40px;
        padding-right: 35px;
        padding-left: 0;
    }
    .el-table__row  .el-input-number>>>.el-input__inner{
        border: none;
        background: transparent
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease, .el-table__row  .el-input-number>>>.el-input-number__increase{
        height: 17px;
        width: 17px;
        border-radius: 50%;
        border: 1px solid #385899;
        top: 10px;
        color: #385899;
    }
    .el-table__row  .el-input-number>>>.el-input-number__decrease{
       left: 80px;
    }
    .el-table__row  .el-input-number>>>.el-input-number__increase{
       right: 90px;
    }
    .el-table__row   .el-input-number>>>[class*=" el-icon-"],.el-table__row  .el-input-number>>> [class^=el-icon-]{
        position: absolute;
        left: 2px;
        top: 2px;

    } */
    .cascader{
        margin-right: 15px;
        margin-top: -5px;
    }
    .el-icon-minus{
        font-weight: bold
    }
</style>
<style scoped>
   .el-input-number.is-controls-right>>>.el-input-number__increase{
        line-height: 16px;
    }
    .el-input-number{
        position: relative;
        display: inline-block;
        line-height: 38px;
        overflow: hidden;
        width: auto;
    }
    .el-input-number>>>.el-input-number__increase{
        top: 4px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__decrease{
         bottom: 4px;
    }
    .el-input-number>>>.el-input .el-input__inner{
        /* width: 100px; */
    }


</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #Attence {
    width: $width;
    margin: 0px auto;
    color: #727272;
    .part1{
        margin: 0;
        box-shadow:0px 0px 0px;
        border-radius:none;
        .el-form-item{
             margin-bottom:0px;
         }
        .tips{
            margin-top: 15px;
            color: #1277eb
        }
    }
    .table{
        margin: 20px 0;
    }
  }
</style>
